<!-- 接口日志过滤规则管理 -->
<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    :title="displayModuleTitle"
    :showOkBtn="false"
    :width="1000"
  >
    <BasicTable @register="registerTable">
      <!-- 状态标记 -->
      <template #statusFlag="{ record }">
        <a-button
          v-if="record.flag === 0 || record.flag === '0'"
          type="success"
          shape="default"
          size="small"
          @click="toDisabled(record.id)"
          >启用</a-button
        >
        <a-button
          v-if="record.flag === 5 || record.flag === '5'"
          type="warning"
          shape="default"
          size="small"
          danger
          @click="toEnabled(record.id)"
          >禁用</a-button
        >
      </template>

      <!-- 用户id显示 -->
      <template #uidDisplay="{ record }">
        <span v-if="record.uid === 0 || record.uid == null"> - </span>
        <span v-else>{{ record.uid }}</span>
      </template>

      <template #toolbar>
        <a-button type="primary" @click="onAddApiFilter"> 新增 </a-button>
        <a-button @click="onRreshApiFilter"> 刷新 </a-button>
      </template>

      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              icon: 'clarity:note-edit-line',
              tooltip: '编辑',
              onClick: onEditApiFilter.bind(null, record),
            },
            {
              icon: 'ant-design:delete-outlined',
              color: 'error',
              tooltip: '删除',
              popConfirm: {
                title: '是否确认删除',
                placement: 'left',
                confirm: onDeleteApiFilter.bind(null, record),
              },
            },
          ]"
        />
      </template>
    </BasicTable>
    <addOrUpdateApiFilter @register="registerAddOrUpdateForm" @success="opSuccess" />
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref, unref, computed } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';

  import { QcUnifyTransToChildProps } from '/#/QcUnify';
  import { displayTitle } from '/@/utils/QcUnifyUtil';
  import { OperationTypeEnum } from '/@/enums/appEnum';

  import addOrUpdateApiFilter from './addOrUpdateApiFilter.vue';

  import {
    query,
    deleteApiFilter,
    disableApiFilter,
    enableApiFilter,
    refreshApiFilter,
  } from '/@/api/platform/apiFilter';

  import { conditionFormSchema, apiFilterTableColumns } from './apiFilter.data';

  import { useMessage } from '/@/hooks/web/useMessage';
  const { createMessage } = useMessage();

  //使用modal弹出窗口
  import { useModal } from '/@/components/Modal';

  const [registerAddOrUpdateForm, { openModal: openAddOrUpdateApiFilter }] = useModal();

  export default defineComponent({
    name: 'ApiFilterManagement',
    components: { BasicModal, BasicTable, TableAction, addOrUpdateApiFilter },
    emits: ['success', 'register'],
    setup(_, { emit }) {
      //接收父组件传递过来的数据对象
      const qcUnifyProps = ref<QcUnifyTransToChildProps>();
      /**
       * 处理显示的模块标题，用于显示在弹出框中的标题
       */
      let displayModuleTitle = computed(() => {
        return displayTitle(qcUnifyProps.value);
      });

      const moduleTitle = ref('接口日志过滤规则管理');

      const [registerTable, { reload }] = useTable({
        title: moduleTitle.value,
        api: query, //api中指定的为table加载数据对应的查询方法
        columns: apiFilterTableColumns, //表头数据
        formConfig: {
          labelWidth: 100, //设置查询表单中label的宽度
          schemas: conditionFormSchema, // form查询表单
          showResetButton: false, //查询条件部分中是否显示重置按钮
        },
        useSearchForm: true,
        showTableSetting: true, //是否显示表格设置
        bordered: true,
        showIndexColumn: true,
        actionColumn: {
          width: 100,
          title: '操作',
          dataIndex: 'action',
          slots: { customRender: 'action' },
          fixed: 'right', //表格操作列是否固定，不设置时默认固定在右侧
        },
        scroll: { y: 400 },
      });

      /**
       * 根据父组件传递过来的参数获取对应的操作，操作不同所对应的界面不同
       */
      const [registerModal, { setModalProps }] = useModalInner(async (data) => {
        console.log(data);
        //接收父组件传递的数据
        if (data != undefined && data != null) {
          qcUnifyProps.value = unref(data);
          console.log('接收的对象', data.dataId);
        }

        setModalProps({ confirmLoading: false });
      });

      /**
       * 打开新增弹窗
       */
      function onAddApiFilter() {
        //使用props传递数据至子组件，在data参数中指定
        let propsData: QcUnifyTransToChildProps = {
          moduleName: moduleTitle.value,
          operateType: OperationTypeEnum.ADD,
        };
        openAddOrUpdateApiFilter(true, propsData);
      }

      /**
       * 打开修改弹窗
       */
      function onEditApiFilter(record: Recordable) {
        //使用props传递数据至子组件，在data参数中指定
        let propsData: QcUnifyTransToChildProps = {
          moduleName: moduleTitle.value,
          operateType: OperationTypeEnum.EDIT,
          dataId: record.id,
        };
        openAddOrUpdateApiFilter(true, propsData);
      }

      /**
       * 删除
       */
      function onDeleteApiFilter(record: Recordable) {
        deleteApiFilter(record.id)
          .then((res) => {
            console.log('res', res);
            //res判断结果：同时==undefined和null
            if (res == undefined && (res == null || Object.keys(res).length == 0)) {
              createMessage.success('删除成功。', 2);
              opSuccess();
            }
          })
          .catch((ex) => {
            console.log('catch ', ex);
            createMessage.error(ex.msg);
          });
      }

      /**
       * 禁用
       */
      function toDisabled(id) {
        disableApiFilter(id)
          .then((res) => {
            console.log('res', res);
            //res判断结果：同时==undefined和null
            if (res == undefined && (res == null || Object.keys(res).length == 0)) {
              createMessage.success('禁用成功。', 2);
              opSuccess();
            }
          })
          .catch((ex) => {
            console.log('catch ', ex);
            createMessage.error(ex.msg);
          });
      }

      /**
       * 启用
       */
      function toEnabled(id) {
        enableApiFilter(id)
          .then((res) => {
            console.log('res', res);
            //res判断结果：同时==undefined和null
            if (res == undefined && (res == null || Object.keys(res).length == 0)) {
              createMessage.success('启用成功。', 2);
              opSuccess();
            }
          })
          .catch((ex) => {
            console.log('catch ', ex);
            createMessage.error(ex.msg);
          });
      }

      //操作成功后
      function opSuccess() {
        reload();
        onRreshApiFilter();
      }

      function onRreshApiFilter() {
        refreshApiFilter().then((res) => {
          if (!res) {
            createMessage.success('刷新日志过滤规则成功');
          } else {
            createMessage.error(res);
          }
        });
      }

      return {
        displayModuleTitle,
        registerModal,
        opSuccess,
        registerTable,
        registerAddOrUpdateForm,
        onAddApiFilter,
        onEditApiFilter,
        onDeleteApiFilter,
        toDisabled,
        toEnabled,
        onRreshApiFilter,
      };
    },
  });
</script>
